<template>
  <div>
    <!-- 页头 -->
    <byd-header />
    <div id="center">
      <el-row :gutter="24">
        <el-col :span="8" v-for="(car, cid) in data" :key="cid">
          <el-card :body-style="{ padding: '0px' }" style="margin: 10px 0">
            <img :src="`${car.lpic}`" class="image" />
            <div class="bottom">
              <div>
                <p>
                  <img src="../assets/money.png" /><i>{{ car.gprice }}W</i>
                </p>
                <p><img src="../assets/car.png" /> {{ car.title }}</p>
              </div>
              <div id="btn">
                <router-link to="/details">
                  <el-button type="info" plain class="btn">
                    <span class="el-icon-search"> 查看详情</span>
                  </el-button>
                </router-link>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div v-show="!data">
      <el-empty
        description="暂无您查询的数据，请搜索其它关键词~"
        image="/pic/no_carlist.png"
      ></el-empty>
    </div>
  </div>
</template>

<script>
import BydHeader from "../components/BydHeader.vue";
export default {
  components: { BydHeader },
  data() {
    return {
      data: [],
      search: "",
    };
  },

  mounted() {
    this.save();
    this.getCarlist();
  },
  methods: {
    save() {
      this.search = sessionStorage.getItem("search");
    },
    getCarlist() {
      if(this.search=='车'){
        this.search=''
      }
      const url = `/search/find?title=${this.search}`;
      this.axios.get(url).then((res) => {
        this.data = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#center {
  width: 1200px;
  margin: 0 auto;
  user-select: none;
  margin-bottom: 100px;
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-content: center;

  // 钱包，汽车小图标
  img {
    width: 26px;
    display: inline-block;
    vertical-align: middle;
  }

  &:last-child {
    margin: 20px;
  }

  p {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    margin: 8px;
  }
}

#btn {
  margin-top: 15px;
}

.btn:hover {
  background-color: rgb(199, 198, 198);
  border-color: rgb(199, 198, 198);
  color: white;
}

.image {
  width: 100%;
  display: block;

  &:hover {
    transform: scale(1.15);
    transition: 1.5s;
    cursor: pointer;
  }
}
</style>
